<template>
  <div>
    <m-table :data="orderList" :selection="true" ref="couponList">
      <template v-slot:header="{ row }">
        <div
          style="width:100%;display:flex;align-items: center;justify-content:space-between"
        >
          <span style="margin-right:50px">订单号：{{ row.id }}</span>
          <span style="float:right;margin-right:10px">
            <el-popover
              placement="bottom-start"
              width="200"
              trigger="hover"
              :disabled="!row.note"
            >
              <div>备注：{{row.note}}</div>
              <i
                slot="reference"
                class="iconfont iconPC-beizhu"
                :style="{ color: row.backRemark ? 'red' : '' }"
                style="font-size:24px"
                @click="remarkOrders(row)"
              ></i>
            </el-popover>
          </span>
        </div>
      </template>
      <m-table-column label="商品" v-slot="{ row }">
        <span class="middleCenter">
          <CouponType :coupon="row"></CouponType>
        </span>
      </m-table-column>
      <m-table-column label="买家" v-slot="{ row }">
        <span class="middleCenter">{{ row.wxuserName }}</span>
      </m-table-column>
      <m-table-column label="优惠券有效期" v-slot="{ row }">
        <span class="middleCenter" v-if="row.effectiveDays > 0"
          >领取后{{ row.effectiveDays }}天有效</span
        >
        <span class="middleCenter" v-else>{{ row.couponValidity }}</span>
      </m-table-column>
      <m-table-column label="兑换时间" v-slot="{ row }">
        <span class="middleCenter">{{ row.sendTime }}</span>
      </m-table-column>
      <m-table-column label="实付积分" v-slot="{ row }">
        <span class="middleCenter">{{ row.realPayIntegral }}</span>
      </m-table-column>
    </m-table>
    <el-dialog
      :visible.sync="remarkVisible"
      width="30%"
      :before-close="closeHandle"
    >
      <div slot="title" style="font-weight:bold">备注</div>
      <div>
        <div class="">您已选择1笔订单</div>
        <el-input
          style="margin-top:20px"
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 4 }"
          placeholder="请输入备注"
          v-model="remarkContent.backRemark"
        ></el-input>
        <div class="digBottom" style="">
          <el-button size="small" @click="closeHandle">取 消</el-button>
          <el-button size="small" type="primary" @click="dialogSure"
            >确 定</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import CouponType from "../../common/CouponType.vue";
import { remarkIntegralCouponOrder } from "@/api/integral/integral";

@Component({
  components: {
    CouponType,
  },
})
export default class CouponTable extends Vue {
  @Prop({
    type: Array,
    default() {
      return [];
    },
  })
  couponOrder: any;

  @Watch("couponOrder")
  getList() {
    this.orderList = JSON.parse(JSON.stringify(this.couponOrder));
  }

  /** 弹窗状态 */
  remarkVisible = false;

  /** 备注详情 */
  remarkContent = {
    backRemark: "",
  };

  orderList = [];

  /**
   * 单个订单信息设置备注
   */
  remarkOrders(row) {
    this.remarkVisible = true;
    this.remarkContent = row;
  }

  /**
   * 关闭弹窗
   */
  closeHandle() {
    this.$confirm("确定退出备注窗口？退出后，备注信息不会保留？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        this.remarkVisible = false;
      })
      .catch(err => {
        console.log(err, "err");
      });
  }

  dialogSure() {
    const ids = [];
    const remarkContent = this.remarkContent as any;
    ids.push(remarkContent.id);
    remarkIntegralCouponOrder({
      backRemark: remarkContent.backRemark,
      isCoverage: true,
      ids,
    })
      .then(() => {
        this.$message.success("备注成功");
        this.remarkVisible = false;
        this.$parent.getCouponOrder();
      })
      .catch(err => {
        console.log(err, "err");
      });
  }
}
</script>

<style lang="scss" scoped>
.middleCenter {
  @include flex(center, center);
}

.digBottom {
  margin-top: 40px;
  display: flex;
  align-content: center;
  justify-content: center;
}
</style>
